"use client";
import { useTranslations } from "next-intl";
import { FC, PropsWithChildren } from "react";

interface Props {}

const terms = [
    { label: "aml", url: "" },
    { label: "terms", url: "" },
    { label: "kyc", url: "" },
    { label: "self", url: "" },
    { label: "underage", url: "" },
    { label: "responsible", url: "" },
    { label: "esportes", url: "" },
];
const HomeActions: FC<PropsWithChildren<Props>> = (props) => {
    const t = useTranslations("HomePage");
    const handler = (url: string) => {
        console.log(`🎯🎯🎯🎯🎯-> in HomeActions.tsx on 9`, url);
    };

    const scrollToTop = () => {
        const parentEle = document.querySelector("#maincontainer");
        parentEle!.scrollTo({ top: 0, behavior: "smooth" });
    };

    return (
        <div>
            {/*about*/}
            <div
                className={
                    "grid cursor-pointer grid-cols-3 text-center text-[0.12rem]" + " text-[#fff]"
                }
            >
                <div onClick={() => handler("1")}>{t("Sobre")}</div>
                <div
                    onClick={() => handler("2")}
                    className={"border-l-1 border-r-1" + " border-[grey]"}
                >
                    {t("Contante")}
                </div>
                <div onClick={() => handler("3")}>{t("Como")}</div>
            </div>
            {/* service */}
            <div className="mt-[0.26rem] flex flex-col items-center text-[0.12rem]">
                <div className={"flex"}>
                    <div className="bg-white m-[0.05rem] h-[0.3889rem] w-[0.3889rem] rounded">
                        <img src="https://9f.com/img/service.fde992c6.png" alt="" />
                    </div>
                    <div className="bg-white m-[0.05rem] h-[0.3889rem] w-[0.3889rem] rounded">
                        <img src="https://9f.com/img/persons.da1a04fe.png" alt="" />
                    </div>
                </div>

                <div className={"text-[#ff6a01]"}>{t("Service")}</div>
            </div>
            {/*share*/}
            <div className="mx-[0.26rem] my-[0.2rem] flex flex-col items-center">
                <div className={"text-[0.08rem] text-[#adadad]"}>{t("Share")}</div>
                <div className={"flex justify-center"}>
                    <img
                        className={"mx-[0.1rem] h-[0.35rem] w-[0.35rem]"}
                        src="https://9f.com/img/telegram.9b8c9ead.png"
                        alt=""
                    />
                    <img
                        className={"mx-[0.1rem] h-[0.35rem] w-[0.35rem]"}
                        src="https://9f.com/img/kwai.b9d0c480.png"
                        alt=""
                    />
                    <img
                        className={"mx-[0.1rem] h-[0.35rem] w-[0.35rem]"}
                        src="https://9f.com/img/tiktok.6637bff7.png"
                        alt=""
                    />
                    <img
                        className={"mx-[0.1rem] h-[0.35rem] w-[0.35rem]"}
                        src="https://9f.com/img/youtube.87fed924.png"
                        alt=""
                    />
                </div>
            </div>
            {/*terms*/}
            <div className={"pb-[0.1rem] text-center text-[0.13rem]"}>
                {terms.map((item, index) => {
                    return (
                        <span key={index} className={"inline-block px-[0.1rem] text-[#adadad]"}>
                            {t(item.label)}
                        </span>
                    );
                })}
            </div>
            {/*LICENCIA*/}
            <div className={"mx-[0.31rem] text-[0.09rem] text-[#adadad]"}>
                <div className={"border-b-1 border-[#4d4d4d] text-center leading-[0.26rem]"}>
                    {t("licencia")}
                </div>
                <div className={"mx-[0.03rem] my-[0.08rem]"}>
                    {t("desc")}
                    <a href="#" className={"text-[#fff]"}>
                        {t("desclink")}
                    </a>
                    <div className={"mt-[0.08rem] text-left"}>
                        {t("desc2")}
                        <br />
                        {t("desc3")}
                        <br />
                        {t("desc4")}
                    </div>
                </div>
            </div>
            {/*support*/}
            <div className={"mt-[0.3rem] flex items-center justify-around pb-[0.5rem] text-[#fff]"}>
                <div
                    className={
                        "h-[0.45rem] w-[0.45rem] rounded bg-gradient-to-b from-[#ff9323]" +
                        " flex items-center justify-center to-[#ff6a01]"
                    }
                >
                    <span className={"iconfont icon-shoucang text-[0.15rem]"}></span>
                </div>
                <div
                    className={
                        "flex h-[0.46rem] w-[0.46rem] rounded-[0.02rem] bg-[#25272c]" +
                        " flex-col items-center justify-center text-[0.12rem]"
                    }
                    onClick={scrollToTop}
                >
                    <span className={"iconfont icon-xiangshang text-[#ff6a01]"}></span>
                    Top
                </div>
            </div>
        </div>
    );
};

export default HomeActions;